<template>
    <div id="banner" class="banner">

        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="banner in bannerList">
                <a v-bind:href="banner.link" target="_blank"><img v-bind:src="banner.uri" alt=""></a>
            </mt-swipe-item>
        </mt-swipe>

        <!--<swipe class="my-swipe">-->
        <!--<swipe-item v-for="banner in bannerList">-->
        <!--<a v-bind:href="banner.link"><img v-bind:src="banner.uri" alt=""></a>-->
        <!--</swipe-item>-->
        <!--</swipe>-->
    </div>
</template>

<script>
    import {Swipe, SwipeItem} from 'mint-ui';

    export default {
        name: 'banner',
        data () {
            return {
                bannerList: []
            }
        },
        mounted: function () {

            this.$http.get(this.GLOBAL.serverAddr + '/advertisement?category=discover', {
                headers: {},
                emulateJSON: true
            }).then(function (response) {
                this.bannerList = response.data;
            }, function (response) {
                // 这里是处理错误的回调
                console.log(response)
            });
        },
        components: {
            'mt-swipe': Swipe,
            'mt-swipe-item': SwipeItem
        }
    }
</script>

<style>
    @import "../assets/css/vue-swipe.css"
</style>
